<template>
  <el-switch
    v-model="darkStatus"
    class="dark-switch"
    active-action-icon="MoonNight"
    inactive-action-icon="Sunny"
    @change="changeThis"
  />
</template>

<script setup>
import { useDark, useToggle } from "@vueuse/core";
const { proxy } = getCurrentInstance();
const isDark = useDark({
  valueDark: "dark",
  valueLight: "light",
});
const toggleDark = useToggle(isDark);
const darkStatus = ref(isDark.value);

watch(
  isDark,
  (newVal) => {
    darkStatus.value = newVal;
  },
  { immediate: true }
);

const changeThis = () => {
  toggleDark();
};
</script>

<style scoped lang="scss"></style>
